import 'package:flutter/material.dart';
import 'package:flutter_application_1/global.dart';
import 'package:lottie/lottie.dart';

class LottieTest extends StatefulWidget {
  @override
  _LottieTestState createState() => _LottieTestState();
}

class _LottieTestState extends State<LottieTest> with TickerProviderStateMixin {
  // 标题
  Widget _titleBuilder(String title) {
    final BorderSide thinBorder = BorderSide(
      width: 2,
      color: Theme.of(context).primaryColor,
    );

    final BorderSide boldBorder = BorderSide(
      width: 6,
      color: Theme.of(context).primaryColor,
    );

    return Container(
      height: 40,
      margin: EdgeInsets.symmetric(vertical: 5, horizontal: 8),
      padding: EdgeInsets.only(left: 6),
      alignment: Alignment.centerLeft,
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border(
          top: thinBorder,
          right: thinBorder,
          bottom: thinBorder,
          left: boldBorder,
        ),
      ),
      child: Text(title),
    );
  }

  late AnimationController _controller1;
  late Animation<double> _animation1;

  late AnimationController _controller2;
  late Animation<double> _animation2;

  @override
  void initState() {
    super.initState();

    _controller1 = AnimationController(
      vsync: this,
      duration: Duration(
        milliseconds: 1500,
      ),
    );

    _animation1 = Tween<double>(
      begin: 0,
      end: 0.33,
    ).animate(
      CurvedAnimation(
        parent: _controller1,
        curve: Curves.linear,
      ),
    );

    _controller2 = AnimationController(
      vsync: this,
      duration: Duration(
        milliseconds: 3000,
      ),
    );

    _animation2 = Tween<double>(
      begin: 0.33,
      end: 1,
    ).animate(
      CurvedAnimation(
        parent: _controller2,
        curve: Curves.linear,
      ),
    );
  }

  @override
  void dispose() {
    _controller1.dispose();
    _controller2.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('动画'),
        centerTitle: true,
      ),
      body: ListView(
        children: [
          _titleBuilder('简单使用'),
          Lottie.asset(
            'assets/refresh.json',
            width: 200,
            height: 200,
          ),
          _titleBuilder('阶段1'),
          Lottie.asset(
            'assets/refresh.json',
            width: 200,
            height: 200,
            controller: _animation1,
            onLoaded: (_) {
              _controller1.repeat();
            },
          ),
          _titleBuilder('阶段2'),
          Lottie.asset(
            'assets/refresh.json',
            width: 200,
            height: 200,
            controller: _animation2,
            onLoaded: (_) {
              _controller2.repeat();
            },
          ),
          _titleBuilder('结合到下拉刷新'),
          Center(
            child: ElevatedButton(
              child: Text('下拉刷新测试 -> lottie刷新'),
              onPressed: () {
                Global.routerUtils.navigateTo(
                  context,
                  Global.routeMap.refreshPage,
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
